.page-exchange-prize {
  padding: px2rem(110px) px2rem(30px) 0;
  min-height: 100%;
  .main-body {
    border-radius: px2rem(40px) px2rem(40px) 0 0;
    background: #0d5e57;
    height: 100%;
    padding: px2rem(90px) px2rem(10px) 0;
  }
  .main-caption{
    width: px2rem(545px);
    height: px2rem(200px);
    background: url("../images/16.png") no-repeat top center;
    background-size: 100%;
    position: absolute;
    left:50%;
    transform: translate(-50%,0);
    top:px2rem(20px);
  }
  .sec-userinfo{
    li{
      width: 33.33%;
      &:nth-child(2){
         border-left: 1px dashed #434343;
         border-right: 1px dashed #434343;
      }
    }
    .avatar{
      width: px2rem(105px);
      height: px2rem(105px);
      margin: 0 auto;
      overflow: hidden;
      border-radius: 100%;
      border:2px solid #f9c698;
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }
    .coin-pic{
      width: px2rem(34px);
      height: px2rem(34px);
      border-radius: 100%;
      background: url("../images/14.png") no-repeat top center;
      background-size: 100%; 
    }
    .goprize-btn{
      width: px2rem(155px);
      height: px2rem(60px);
      display: flex;
      justify-content: center;
      align-items: center;
      background:#fff1d6;
      border-radius: px2rem(10px);
      color: #0d5e57;
      font-size: px2rem(26px);
      font-weight: bold;
      margin: 0 auto;
    }
  }
  .sec-exchange-container{
    background: #00514a;
    border-radius: px2rem(20px) px2rem(20px) 0 0;
    margin: px2rem(40px) 0 0;
  }
  .tab-hd{
    display: flex;
    flex-direction: row;
    color: #fff;
    font-size: px2rem(36px);
    color: #fff1d6;
    .item-cell{
      height: px2rem(140px);
      padding: 0 0 px2rem(30px);
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      &.active{
        background: #fff1d6;
        color: #0d4741;
        font-weight: bold;
        border-radius: px2rem(20px) px2rem(20px) 0 0;
      }
    }
  }
  .sec-exchange-list{
    background: #fff1d6;
    border-radius: px2rem(20px) px2rem(20px) 0 0;
    position: relative;
    top: px2rem(-30px);
  }
  .exchange-list{
    padding: 0 px2rem(10px) px2rem(40px);
    li{
      background: #fff;
      border-radius: px2rem(20px);
      display: flex;
      justify-content:space-between;
      align-items: center;
      margin: px2rem(35px) 0 0;
    }
    .pic{
      width: px2rem(120px);
      height: px2rem(120px);
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }
    .count-progress{
      height: px2rem(7px);
      background: #d9d8d8;
      border-radius: px2rem(4px);
    }
    .count-p{
      color: #d47b71;
    }
    .area-lf{
      border-right: 1px dashed #e2e2e2;
      position: relative;
      flex: 1;
      overflow: hidden;
      &:before{
        position: absolute;
        content: "";
        right:px2rem(-15px);
        top: px2rem(-15px);
        width: px2rem(30px);
        height: px2rem(30px);
        background: #fff1d6;
        border-radius: 100%;
      }
      &:after{
        position: absolute;
        content: "";
        right:px2rem(-15px);
        bottom: px2rem(-15px);
        width: px2rem(30px);
        height: px2rem(30px);
        background: #fff1d6;
        border-radius: 100%;
      }
    }
    .area-rt{
      width: px2rem(170px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #898787;
      flex-shrink: 0;
    }
    .handle-dh{
      width: px2rem(145px);
      padding:px2rem(10px) 0;
      border-radius: px2rem(10px);
      background: #43a298;
      color: #fff;
      font-size: px2rem(24px);
      display: flex;
      justify-content: center;
      align-items: center;
      &.disabled{
        background: #acacac;
      }
    }
    .coin-pic{
      width:px2rem(30px);
      height: px2rem(30px);
      background: url("../images/15.png") no-repeat top center;
      background-size: 100%;
    }
  }
}
